<template>
    <div id="pop">
        <div class="module-dialog-layer" style="display: block;"></div>
        <div class="module-dialog clear module-dialog-address module-dialog-show">
        <div class="dialog-panel">
            <div class="topbar">
                <div class="dialog-tit clear">
                    <h4 class="js-dialog-title">管理收货地址</h4>
                </div>
                <span @click="handleClose" class="dialog-close">x</span>
            </div>
            <div class="dialog-con js-dialog-container">
                <div class="animate-layer">
                    <div class="dialog-inner js-address-add">
                        <div class="save-address-box">
                            <div class="address-form">
                                <div class="module-form-row">
                                    <div class="form-item-v3">
                                        <input v-model="newAddress.username" type="text" class="js-verify" placeholder="收货人姓名">
                                        <div class="verify-error"></div>
                                    </div>
                                </div>
                                <div class="module-form-row">
                                    <div class="form-item-v3">
                                        <input v-model="newAddress.phone" type="text" class="js-verify" placeholder="手机号">
                                        <div class="verify-error"></div>
                                    </div>
                                </div>
                                <div class="module-form-row clear">
                                    <div class="form-item-v3 area-code-w fn-left form-valid-item">
                                        <input v-model="newAddress.tel[0]" type="text" placeholder="区号（可选）" class="js-verify js-address-area-code">
                                        <div class="verify-error"></div>
                                    </div>
                                    <div class="form-item-v3 telephone-w fn-right form-valid-item">
                                        <input v-model="newAddress.tel[1]" type="text" placeholder="固定电话（可选）" class="js-verify js-address-telephone">
                                        <div class="verify-error"></div>
                                    </div>
                                </div>
                                <div class="module-form-row clear">
                                    <div class="form-item-v3 select-item province-wrapper">
                                        <select @change="handleSelect(1)" v-model="lv1" name="province_code" class="province select-province js-form-province js-verify">
                                            <option value="-1">请选择省份</option>
                                            <option 
                                                v-for="(item,index) in province" 
                                                :key="index" 
                                                :value="index"
                                            >
                                                {{item.Name}}
                                            </option>
                                           
                                        </select>
                                    </div>
                                </div>
                                <div class="module-form-row clear">
                                    <div class="form-item-v3 select-item city-wrapper fn-left form-focus-item">
                                        <select @change="handleSelect(2)" v-model="lv2" class="city select-city js-form-city js-verify">
                                            <option value="-1">请选择城市</option>
                                            <option 
                                                v-for="(item,index) in city" 
                                                :key="index" 
                                                :value="index"
                                            >
                                                {{item.Name}}
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-item-v3 select-item district-wrapper fn-right form-focus-item">
                                        <select v-model="lv3" class="city select-city js-form-city js-verify">
                                            <option value="-1">请选择区县</option>
                                            <option 
                                                v-for="(item,index) in region" 
                                                :key="index" 
                                                :value="index"
                                            >
                                                {{item.Name}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="module-form-row">
                                    <div class="form-item-v3">
                                        <input v-model="newAddress.address" type="text" class="js-verify" placeholder="详细地址，如街道名称，楼层，门牌号码等">
                                        <div class="verify-error"></div>
                                    </div>
                                </div>
                                <div class="module-form-row fn-clear">
                                    <input type="checkbox" class="hide">
                                    <span class="blue-checkbox"></span>设为默认
                                </div>
                                <div 
                                    class="dialog-blue-btn big-main-btn js-verify-address"
                                    :class="{'disabled-btn':!btnState}"
                                    @click="handleSave"
                                >
                                    <a>保存</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>    
    </div>
</template>

<script>
    import {getCity} from '../api/user'
    import {mapState} from 'vuex'
    export default {
        props: {
            editNum: { //标志【修改】或【新增】
                type: Number,
                default:-1 
            },
        },
        data() {
            return {
                province: [],  //省份数据
                lv1:-1,  //标志用户选中的省份
                lv2:-1,   //标志用户选中的城市
                lv3:-1,   //标志用户选中的区县
                newAddress:{
                    username:'',
                    phone:'',
                    tel:['',''],
                    address:'',
                    isDefault:false
                },
            }
        },
        computed: {
            city() { //根据lv1动态提取对应城市数据
                let {province,lv1} = this
                return lv1==-1 ? [] : province[lv1].City
            },
            region(){ //根据lv2动态提取对应区县数据
                let {city,lv2} = this
                return lv2==-1 ? [] : city[lv2].Region
            },
            btnState(){ //控制保存按钮状态
                let {username,phone,address} = this.newAddress
                let {lv1,lv2} = this
                let bool = true
                if(username==''||phone==''||address==''||lv1==-1||lv2==-1){
                    bool = false
                }
                return bool
            },
            ...mapState({
                addressList:state=>state.address.addressList
            })
        },
        // watch:{ //此处的watch，会影响后续编辑功能的地址显示
        //     lv1(){
        //         this.lv2 = this.lv3 = -1
        //     },
        //     lv2(){
        //         this.lv3 = -1
        //     }
        // },
        methods: {
            handleClose() {
                this.$emit('pop-close')
            },
            handleSave(){
                console.log('保存');
                if(!this.btnState){return}
                let {newAddress,lv1,lv2,lv3,province,city,region} = this
                newAddress.loc = [
                    {name:province[lv1].Name,idx:lv1},
                    {name:city[lv2].Name,idx:lv2},
                    {name:lv3==-1?'':region[lv3].Name,idx:lv3}
                ]
                console.log(newAddress);
                // 我想往状态机中提交这个 newAddress？
                this.$store.commit('address/addAddressMut',{
                    obj:newAddress,
                    editNum:this.editNum
                })
                this.handleClose()
            },
            handleSelect(n){
                if(n===1){
                    this.lv2 = this.lv3 = -1
                }else{
                    this.lv3 = -1
                }
            }
        },
        created () {
            console.log('AddressPop组件创建了',this.editNum);
            
            getCity().then((res)=>{
                // console.log(res);
                this.province = res.data
                let {editNum,addressList} = this
                if(editNum!=-1){ //判断用户编辑、新增
                    this.newAddress = addressList[editNum] //使用父组件传递的地址下标，提取数据并展示
                    let {loc} = addressList[editNum]
                    this.lv1 = loc[0].idx
                    this.lv2 = loc[1].idx
                    this.lv3 = loc[2].idx
                }
            })
        },
        // destroyed () {
        //     console.log('AddressPop组件销毁了');
        // },
    }
</script>

<style src="../assets/css/address-pop.css" scoped></style>